<template>
  <section class="todoapp">
    <!-- 使用 -->
    <TodoHeader @addTask ="HaddTask"
    />
    <!-- 在父组件中传递给子组件 -->
    <TodoMain @getId="delTask" 
    @ChangeDone="hChangeDone"
    @changeAll="hChangeAll"
    :list="showList"
     />
    <TodoFooter 
    :list='showList'
     @hClearDo="hClear"
     @changeType='hchangeType'
     />
  </section>
</template>

<script>
// 引入三个组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  // 注册
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data() {
    return {
      // list: [
      //   { id: 1, name: '吃饭', isDone: true },
      //   { id: 2, name: '睡觉', isDone: false },
      //   { id: 3, name: '打豆豆', isDone: true }
      // ],
      list:JSON.parse(localStorage.getItem('list') || '[]'),
      type:'all'
    }
  },
  methods:{
    // 删除 
    delTask(id){
        // 3. 根据 id 找到数据并删除
      // console.log('子组件传递过来的:', id)
      const index = this.list.findIndex(item => item.id === id)
      this.list.splice(index,1)
    },
    // 修改isDone 状态 
    hChangeDone(id){
      // 3.父组件找到对应的元素将isDone取反 
      const obj = this.list.find(item =>item.id === id)
      // obj指向数组中的对象，所以和数组中的对象是同一个，直接修改isDone会修改数组中的数据
      obj.isDone= !obj.isDone
    },
    // 添加数据 
    HaddTask(taskname){
      // 添加到list 
          this.list.push({
            name:taskname,
            id:Date.now(),
            isDone:false
          })
    },
    // 清楚已选 
    hClear(){
    //清楚所有已完成弟弟任务 
    //采用过滤的思路:
    // 筛选出所有未完成的数据，覆盖给list 即可 
    this.list = this.list.filter(item => !item.isDone)
  },
  hchangeType(TYPE){
    // 子元素传递过来的type用形参接收TYPE
    // 把TYPE赋值给data里面的type
    this.type=TYPE
  //  console.log(TYPE);
  },
  hChangeAll(val) {
    //状态设置给每一个元素
    this.list.forEach(item =>item.isDone = val)
  }
},
// 计算属性内部依赖的数据发送变化，会自动重新计算 
 computed:{
  // 在计算属性中，根据传递过来的type来决定返回什么数组
  // 筛选出所有已完成的任务，加入到一个新数组并返回计算属性
  // 将这个筛选得到的数组返回出去
  // 此时showList就是筛选后已完成的新数组 
  showList(){
     if(this.type === 'all') {
      return this.list 
     }else if(this.type === 'active'){
      return this.list.filter(item=>!item.isDone)
     }else if(this.type === 'completed'){
      return this.list.filter(item=> item.isDone)
     }
  }
 },
 watch:{
  list:{
    deep:true,
    handler(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }
  }
 }
}
</script>

<style></style>